<template>
	<view class="tabbar">
		<view @click="navigateto(item.pagePath)" class="tab" v-for="(item,index) in tabbarList" :key='index'>
			<image class="img" v-if="item.pagePath===currentPage" :src="item.selectedIconPath"  mode=""></image>
			<image class="img	" v-else :src="item.iconPath" mode=""></image>
			<view class="text">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbarList: [{
					"pagePath": "index",
					"text": "首页",
					"iconPath": "/static/tabbar/index.png",
					"selectedIconPath": "/static/tabbar/index-active.png"
				}, {
					"pagePath": "list",
					"text": "分类",
					"iconPath": "/static/tabbar/type.png",
					"selectedIconPath": "/static/tabbar/type-active.png"
				}, {
					"pagePath": "shopcart",
					"text": "购物车",
					"iconPath": "/static/tabbar/buycart.png",
					"selectedIconPath": "/static/tabbar/buycart-active.png"
				}, {
					"pagePath": "my",
					"text": "我的",
					"iconPath": "/static/tabbar/my.png",
					"selectedIconPath": "/static/tabbar/my-active.png"
				}, ]
			}
		},
		props:{
			currentPage:{
				type:String,
				default:'index'
			}
		},
		methods:{
			navigateto(e){
					uni.redirectTo({
						url:`../../pages/${e}/${e}`
					})
			}
		}
	}
</script>

<style scoped>
	.tabbar{
		border-top: 2rpx solid #CCCCCC;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
	}
	.tab{
		flex:1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.img{
		width: 40rpx;
		height: 40rpx;
	}
	.text{
		font-size: 24rpx
	}
</style>
